<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<title>个人知识库</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" th:href="@{/assets/vendor/bootstrap/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/assets/vendor/font-awesome/css/font-awesome.min.css}">
	<link rel="stylesheet" th:href="@{/assets/vendor/linearicons/style.css}">
	<link rel="stylesheet" th:href="@{/assets/vendor/chartist/css/chartist-custom.css}">
	<!-- MAIN CSS -->
	<link rel="stylesheet" th:href="@{/assets/css/main.css}">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" th:href="@{/assets/css/demo.css}">
	<!-- TOASTR -->
	<link rel="stylesheet" th:href="@{/assets/vendor/toastr/toastr.min.css}">
	<!-- PAGE -->
	<link rel="stylesheet" th:href="@{/assets/css/page.css}">
	<!-- CONFIRM -->
	<link rel="stylesheet" th:href="@{/assets/vendor/jquery.confirm/css/jquery-confirm.css}">
	<!-- GOOGLE FONTS -->
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" th:href="@{/assets/img/apple-icon.png}">
	<link rel="icon" type="image/png" sizes="96x96" th:href="@{/assets/img/favicon.png}">
	<style type="text/css">
		.title{ 
			width:500px; 
			white-space:nowrap; 
			overflow:hidden; 
			text-overflow:ellipsis;
			}
	</style>
</head>

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<!-- NAVBAR -->
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="brand">
				<a th:href="index.html"><img th:src="@{/assets/img/logo-dark.png}" alt="Klorofil Logo" class="img-responsive logo"></a>
			</div>
			<div class="container-fluid">
				<div class="navbar-btn">
					<button type="button" class="btn-toggle-fullwidth"><i class="lnr lnr-arrow-left-circle"></i></button>
				</div>
				<form class="navbar-form navbar-left" id="form1" method="post">
					<div class="input-group">
						<div class="input-group-btn">
							<select class="form-control" name="categoryId">
								<option th:each="var : ${categorys}" th:value="${var.id}" th:text="${var.typeName}">Cheese</option>
							</select>
						</div>
						<input type="text" name="url" id="url" class="form-control" style="width: 500px" placeholder="请先选择分类...">
						<span class="input-group-btn"><button type="button" id="sub" class="btn btn-primary">添加!</button></span>
					</div>
				</form>
				<div id="navbar-menu">
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="lnr lnr-question-circle"></i> <span>Help</span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="#">Basic Use</a></li>
								<li><a href="#">Working With Data</a></li>
								<li><a href="#">Security</a></li>
								<li><a href="#">Troubleshooting</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img th:src="@{/assets/img/user.png}" class="img-circle" alt="Avatar"> <span>Samuel</span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
							<ul class="dropdown-menu">
								<li><a href="#"><i class="lnr lnr-user"></i> <span>My Profile</span></a></li>
								<li><a href="#"><i class="lnr lnr-envelope"></i> <span>Message</span></a></li>
								<li><a href="#"><i class="lnr lnr-cog"></i> <span>Settings</span></a></li>
								<li><a href="#"><i class="lnr lnr-exit"></i> <span>Logout</span></a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- END NAVBAR -->
		<!-- LEFT SIDEBAR -->
		<div id="sidebar-nav" class="sidebar">
			<div class="sidebar-scroll">
				<nav>
					<ul class="nav">
						<li><a th:href="categorys" class=""><i class="lnr lnr-home"></i> <span>分类管理</span></a></li>
						<li><a th:href="results" class="active"><i class="lnr lnr-code"></i> <span>内容管理</span></a></li>
						<li><a th:href="rules" class=""><i class="lnr lnr-chart-bars"></i> <span>规则管理</span></a></li>
					</ul>
				</nav>
			</div>
		</div>
		<!-- END LEFT SIDEBAR -->
		<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
					<!-- OVERVIEW -->
					<div class="panel panel-headline">
						<div class="panel-body">
							<table class="table table-condensed table-hover ">
								<thead>
									<tr>
										<th>#</th>
										<th>标题</th>
										<th>修改时间</th>
										<th>详情</th>
									</tr>
								</thead>
								<tbody>
									<tr th:each="result : ${map.list}">
								      	<td th:text="${result.id}"></td>
								      	<td><div class="title"><a th:href="${result.url}" th:title="${result.title}" target="_blank" th:text="${result.title}"></a></div></td>
								      	<td th:text="${#dates.format(result.gmtModified, 'yyyy-MM-dd HH:mm:ss')}"></td>
								    	<td>
								    		<a th:href="|results/${result.id}|"><button type="button" class="btn btn-primary btn-sm"><i class="fa fa-info-circle"></i> 详情</button></a>
								    		<button type="button" onclick="del(this)" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i> 删除</button>
								    	</td>
								    </tr>
								</tbody>
							</table>
							<!-- page -->
							<div class="col-md-offset-3"><ul class="page" maxshowpageitem="5" pagelistcount="12"  id="page"></ul></div>
						</div>
					</div>
					<!-- END OVERVIEW -->
				</div>
			</div>
			<!-- END MAIN CONTENT -->
		</div>
		<!-- END MAIN -->
		<div class="clearfix"></div>
		<footer>
			<div class="container-fluid">
				<p class="copyright">&copy; 2017 <a href="#" target="_blank">Theme I Need</a>. All Rights Reserved. More Information </p>
			</div>
		</footer>
	</div>
	<!-- END WRAPPER -->
	
	<!-- Javascript -->
	<script th:src="@{/assets/vendor/jquery/jquery.min.js}"></script>
	<script th:src="@{/assets/vendor/bootstrap/js/bootstrap.min.js}"></script>
	<script th:src="@{/assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
	<script th:src="@{/assets/vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js}"></script>
	<script th:src="@{/assets/vendor/chartist/js/chartist.min.js}"></script>
	<script th:src="@{/assets/vendor/toastr/toastr.min.js}"></script>
	<script th:src="@{/assets/vendor/jquery.goup/jquery.goup.min.js}"></script>
	<script th:src="@{/assets/vendor/jquery.confirm/js/jquery-confirm.min.js}"></script>
	<script th:src="@{/assets/vendor/config.js}"></script>
	<script th:src="@{/assets/scripts/klorofil-common.js}"></script>
	<script th:src="@{/assets/scripts/page.js}"></script>
	
	<script type="text/javascript" th:inline="javascript">
		toastr.options.positionClass = 'toast-bottom-right';
		$("#sub").click(function(){
		 	$.ajax({
			    type: 'post',
			    data: $("#form1").serialize(),
			    url: 'results',
			    success: function(result) {
			    	if(result.code > -1){
			    		toastr.success(result.msg);
			    		//提交成功后，刷新页面
			    		setTimeout('Refresh()',3000);
			    	}else{
			    		toastr.error(result.msg);
			    	}
			    }
			});
		});
		
		function del(rowNum){  
		    //获取当前所在行数  
		    var id = rowNum.parentNode.parentNode.rowIndex;
		    $.confirm({
			    title: '操作提示!',
			    content: '确定要删除选择的数据吗？',
			    buttons: {
			    	确定: {
			            btnClass: 'btn-success',
			            action: function(){
			            	$.ajax({
							    type: 'DELETE',
							    url: 'results/'+id,
							    success: function(result) {
							    	if(result.code > -1){
							    		toastr.success(result.msg);
							    		//提交成功后，刷新页面
							    		setTimeout('Refresh()',3000);
							    	}else{
							    		toastr.error(result.msg);
							    	}
							    }
							});
			            }
			        },
			    	取消: function () {
			            //close
			        },
			    }
			});  
		}
		
		var PAGE = {
	        "data":function(num){
	            window.location.href="page?page="+num;
	        }
	    }
	    var totalCount = /*[[${map.total}]]*/;
	    var pageSize = /*[[${pageSize}]]*/;
	    $("#page").initPage(totalCount,pageSize,PAGE.data);
	</script>
</body>

</html>
